<template>
  <!--模态窗 单行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="treeModelObj.isShow">
      <div class="modal-ctrl-main odd-row-ctrl">
        <div id="tree-dep" class="ztree div-tree "></div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="subBtn">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: "ztreeModel",
    props:["treeModelObj"],
    data(){
      return {
        setting : {
          data: {
            simpleData: {
              enable: true
            },
            key: {
              children: "childrenPoliceStation",
              name: "stationName"
            }
          },
          view: {
            showIcon: false
          },
          callback: {
            onClick: this.zTreeOnClick,
          }
        },
        stationName: '',
        stationIds: [],
      }
    },
    methods:{
      // 当树的某项被点击
      zTreeOnClick(evt, treeId, treeNode){
        this.stationIds = [];
        this.stationName = treeNode.stationName;
        let treeObj = $.fn.zTree.getZTreeObj("tree-dep");
        // nodeAry 点击项和其子节点的集合
        let nodeAry = treeObj.transformToArray(treeNode);
        nodeAry.forEach(item => {
          this.stationIds.push(item.id);
        })
        //console.log(this.stationIds)
      },
      //提交
      subBtn(){
        let data = {
          stationName: this.stationName,
          stationIds: this.stationIds
        }
        this.$emit("ztreeModelSub",data);
        this.clearData(); //关闭弹窗清除数据
      },

      //关闭弹窗
      close(){
        this.$emit("ztreeModelClose");
        this.clearData(); //关闭弹窗清除数据
      },
      //清除数据
      clearData(){
        this.stationName =  '';
        this.stationIds =  [];
      },
      //树结构加载
      treeAjax(url,type){
        this.$axios[type](url)
          .then((res)=>{
            let resdate = JSON.stringify(res.data).replace(/,\"childrenPoliceStation\"\:\[\]/g,"");
            $.fn.zTree.init($("#tree-dep"), this.setting, JSON.parse(resdate));
          })
          .catch((err)=>{
            this.s_alert('部门树加载数据问题，请联系管理员')
            //console.log(err);
          })
      },
    }, // end methods
    watch:{
      treeModelObj:{
        handler:function(val){
          if(val.isShow){
            this.treeAjax(baseURL+'api/jp-BIRM-UserProfile-ms/layer-policestations/'+val.stationId,'get');
          }
        },
        deep:true
      }
    }
  }
</script>

<style scoped>
  .ztree.div-tree {
    max-height: 494px;
    overflow-y: auto;
  }
</style>

